
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
            <el-breadcrumb-item>
                <i class="el-icon-lx-calendar"></i>表单
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                编辑器
            </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                Vue-Quill-Editor:基于Quill、适用于Vue2 的富文本编辑器
            </div>
            <quill-editor ref="myTextEditor" v-model="content" :options="editorOption">
            </quill-editor>
            <el-button class="editor-btn" type="primary" @click="submit">
                提交
            </el-button>
        </div>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor }  from 'vue-quill-editor';
export default {
    data: function(){
        return {
            content: '',
            editorOption: {
                placeholder: 'Hello World'
            }
        }
    },
    components: {
        quillEditor
    },
    methods: {
        onEditorChange({ editor, html, text }) {
            this.content = html;
        },
        submit(){
            console.log(this.content);
            var params = new URLSearchParams();
            params.append("content",this.content);
            this.$axios
            .post('/editcontent', params)
            .then(successResponse => {
            this.responseResult = JSON.stringify(successResponse.data)
            console.log("code--->"+successResponse.data.code)
            if (successResponse.data.code == '200') {
                this.$message.success('提交成功！');
            }else{
                this.$message.error("提交失败");
            }
            })
            .catch(failResponse => {
                console.log("提交错误"+failResponse.data)            
            })
        }
    }   
}
</script>



<style scoped>
    .editor-btn{
        margin-top: 20px;
    }
</style>
